<template>
	<!-- 修改用户-->
	<div class="page" v-loading="loading">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>修改用户</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="addData" :model="addData" status-icon :rules="addRules" label-width="20%" class="add-data">
            <el-form-item label="姓名" prop="name">
                <el-input size="small" v-model="addData.name"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input size="small" type="number" v-model="addData.mobile"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <city-three v-on:sendCityData="getCityData"></city-three>
            </el-form-item>
            <el-form-item label="备注">
                <el-input size="small" v-model="addData.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="addPerson('addData')">确认修改</el-button>
                <el-button @click="utils.back">取消</el-button>
            </el-form-item>
        </el-form>
	</div>
</template>
<script>
	import axios from "axios";
	import cityThree from "../../common/cityThree.vue";
	import addPerson from '../../common/addPerson.vue';
	export default {
		name: "add",
		data() {
			return {
				addData: {
					name: '',
					mobile: "",
					address: "",
					proportion: '',
					remark: "",
				},
				addRules: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '电话不能为空',
						trigger: 'blur'
					}],
				},
				loading: false,
				city: "",
			};
		},
		components: {
			cityThree,
			addPerson
		},
		created() {},
		mounted() {
			this.getDetails();
		},
		methods: {
			getDetails() {
				this.loading = true;
				this.$post("getDetails", {
					id: this.$route.params.id
				}).then(res => {
					this.loading = false;
					this.form = res.data;
				}).catch((e)=>{
					this.loading = false;
				})
			},
			// 获取子组件（省市区）数据
			getCityData(data) {
				this.city = data;
				this.form.provcity = this.city;
			},
			// 添加用户
			addPerson(addData) {
				this.$refs[addData].validate(valid => {
					if(valid) {
						this.supplierContacts.push(this.addData);
						this.dialogTableVisible = false;
						this.sendData();
					} else {
						this.$msg.error("网络或服务器错误");
					}
				});
			},
		}
	};
</script>
<style lang="less" scoped>
	.page {
		.content {
			width: 1000px;
			margin: 0 auto;
			.el-input {
				width: 600px;
			}
		}
		.add-data {
			.el-input {
				width: 80%;
			}
		}
	}
</style>